<template>

  <div class="app-container">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="标题">
        <el-select v-model="form.type" placeholder="请选择" @change="selectChange">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="标题">
        <el-input v-model="form.title" />
      </el-form-item>
      <el-form-item label="内容">
        <div v-if="form.type !== 3" style="border: 1px solid #ccc; margin-top: 10px">
          <!-- 工具栏 -->
          <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :default-config="toolbarConfig"
          />
          <!-- 编辑器 -->
          <Editor
            ref="lldEditor"
            v-model="form.content"
            style="height: 400px; overflow-y: hidden"
            :default-config="editorConfig"
            @onCreated="onCreated"
          />
        </div>
        <el-input
          v-if="form.type === 3"
          v-model="form.content"
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="publish">立即发布</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { getDetails, publishNew } from '@/api/new'

export default {
  name: 'MyEditor',
  components: { Editor, Toolbar },
  data() {
    return {
      editor: null,
      html: '',
      toolbarConfig: {
        // toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],
        // excludeKeys: [ /* 隐藏哪些菜单 */ ],
      },
      editorConfig: {

        placeholder: '请输入内容...',
        // autoFocus: false,

        // 所有的菜单配置，都要在 MENU_CONF 属性下
        MENU_CONF: {
          'uploadImage': {
            server: 'http://39.106.32.84:8080/PMSystem/upload/RichText',
            fieldName: 'file',
            width: '500px'
          }
        }
      },
      form: {
        title: '',
        content: '',
        type: ''
      },
      options: [{
        value: 1,
        label: '新闻'
      }, {
        value: 2,
        label: '资讯'
      }, {
        value: 3,
        label: '公告'
      }],
      newId: '' // 新闻、咨询id
    }
  },

  mounted() {
    this.configEidtor()
  },
  created() {
    if (this.$route.query.id !== null) {
      this.newId = this.$route.query.id
      this.selectDetailById()
    }
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁 editor ，重要！！！
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 【注意】一定要用 Object.seal() 否则会报错
    },
    configEidtor() {
      const editor1 = new Editor(this.$refs.lldEditor)
      console.log(editor1)
    },
    cancel() {
      this.$router.push('/news/new')
    },
    publish() {
      publishNew(this.form).then(res => {
        this.$message.success('发布成功！')
        this.$router.push('/news/new')
      })
    },
    selectChange() {
      this.form.content = ''
    },
    selectDetailById() {
      getDetails(this.newId).then(res => {
        this.form = res.data
        console.log(res)
      })
    }
  }
}
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
